<template>
	<view class="flex flex-direction content-box" :class="[proxy.$themeClass('page-another-bg-color')]">
		<uni-status-bar v-if="!isShowNav" />
		<slot name="nav"/>
		<view :style="{'height': 'calc(100vh - ' + safeAreaInsetBottom + ' - ' + statusBarHeight + ' - ' + tabbarHeight + ' - ' + navHeight  + ')'}">
			<slot name="content" />
		</view>
		<view class="cu-bar tabbar shadow foot" v-if="isShowTabbar">
			<slot name="tabbar"/>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { defineProps} from 'vue'
	import useCurrentInstance from '@/utils/useCurrentInstance'
	const { proxy } = useCurrentInstance()
	let safeAreaInsetBottom: string = '0px'
	let statusBarHeight: string = '0px'
	let isShowNav: boolean = true
	let isShowTabbar: boolean = true
	let navHeight: string = '45px'
	let tabbarHeight: string = '100rpx'
	const props = defineProps({
		isShowNav: {
			type: Boolean,
			default : true,
			required: false
		},
		isShowTabbar: {
			type: Boolean,
			default : true,
			required: false
		}
	})
	onBeforeMount(() => {
		console.log("onBeforeMount")
	})
	onMounted(() => {
		statusBarHeight = proxy.StatusBar + 'px';
		safeAreaInsetBottom = proxy.SystemInfo.safeAreaInsets.bottom + 'px';
		console.log(safeAreaInsetBottom);
		// const slots = useSlots()
		// console.log(slots);
		// if(!slots["nav"]){
		// 	isShowNav = false;
		// 	navHeight = '0px';
		// }
		// if(!slots["tabbar"]){
		// 	isShowTabbar = false;
		// 	tabbarHeight = '0rpx';
		// }
		// nextTick(() => {
		// 	useEventListener("resize", () => {
		// 	if (!echartInstance) return;
		// 	useTimeoutFn(() => {
		// 		echartInstance.resize();
		// 	}, 180);
		// 	});
		// });
	});
</script>
<style scoped lang="scss">
	.content-box{
		min-height: calc(100vh);
	}
</style>
